<template>
  <div class="container_width common_wrap">
    <el-divider>标准动态</el-divider>
    <el-tabs
      v-model="tabsActive"
      type="border-card"
      class="box-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <el-table
          :data="tableData"
          :header-cell-style="{ 'background-color': '#2f74d3', color: '#fff' }"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="standardNo" label="标准号" width="180">
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/basicsearch/detail', scope.row)"
              >
                {{ scope.row.standardNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标准名称"
            show-overflow-tooltip
            width="400"
          >
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/basicsearch/detail', scope.row)"
                v-html="scope.row.title"
              ></div>
            </template>
          </el-table-column>
          <el-table-column prop="standardStatus" label="状态" width="125">
            <template slot-scope="scope">
              <span
                v-if="scope.row.standardStatus == '现行'"
                class="num_green"
                >{{ scope.row.standardStatus }}</span
              >
              <span
                v-else-if="scope.row.standardStatus == '即将实施'"
                class="num_yel"
                >{{ scope.row.standardStatus }}</span
              >
              <span
                v-else-if="scope.row.standardStatus == '被代替'"
                class="num_gray"
                >{{ scope.row.standardStatus }}</span
              >
              <span
                v-else class="num_color"
                >{{ scope.row.standardStatus }}</span
              >
            </template>
          </el-table-column>

          <el-table-column prop="publishDate" label="发布时间" width="130">
          </el-table-column>
          <el-table-column prop="implDate" label="实施时间" width="130">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <div class="pagination_wrap">
        <div>
          共<span class="num_color"> {{ total }} </span>条记录
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout=" sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import { standardDynamics } from "@/api/home.js";
export default {
  name: "Trends",
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tabsActive: "0",
      tabList: [
        { label: "最新上线", name: "0" },
        { label: "即将实施", name: "1" },
        { label: "最新被代替", name: "2" },
        { label: "最新废止", name: "3" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNo: this.pageNo - 1,
        pageSize: this.pageSize,
        dynamicStatus: this.tabsActive,
      };
      standardDynamics(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        }
      });
    },
    handleClick(tab) {
      this.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    goPath(path, row) {
      this.$router.push({
        path,
        query: {
          row: JSON.stringify(row),
        },
      });
    },
  },
};
</script>

<style lang="scss"></style>
